<template>
  <div>
      <div class="ticket" v-if="!selCity">
        <div class="mytic">
           <div @click="toSel('from')">{{from}}</div>
          <div>
            <van-icon @click="cityChange" name="exchange"></van-icon>
          </div>
          <div @click="toSel('to')">
            {{to}}
          </div>
        </div>
        <div class="date" @click="show=true">
     
      
           {{dateStr}}<span>{{days}}</span>
        </div>
        <div class="btn">
          <van-button type="success" block @click="turnToBuy">查询</van-button>
        </div>

      </div>
      <div id="city" v-if="selCity">
          <van-index-bar>

            <template v-for="(val,key) in indexArr">
                 <van-index-anchor :index="key" />
              <van-cell  @click="toChangeCity(item)" :title="item" v-for="item in val" />
      
            </template>
          

              
          </van-index-bar>
      </div>
      <div >
        
        <van-calendar v-model:show="show" switch-mode="year-month" @confirm="toChangeDate" />
  
      </div> 
  </div>
</template>
<script lang="ts" setup>
    import {reactive,toRefs,ref} from 'vue'
    import {useRouter} from 'vue-router'
    let router=useRouter();
    let from=ref<string>('北京')
    let to=ref<string>('上海')
  
    let show=ref<boolean>(false)//日历控制器
    let dateStr=ref('9月24日')
    let days=ref('周一')
    let flag=ref<string>('')//当前是to还是from的选择
    interface Istate{
        indexArr:object,
        selCity:boolean
    }
    let state:Istate=reactive({
        indexArr:{
          A:['安庆','鞍山','澳门','安阳'],
          B:['北京','包头','保定'],
          C:['成都','长春','常州',"长沙"],
          H:["哈尔滨","呼和浩特"]
        },
        selCity:false
    })
    // 点击选择城市
     let toSel=(str:string)=>{
      console.log(1111)
      state.selCity=true;
      flag.value=str
    }
    let {indexArr,selCity}=toRefs(state)
    console.log(indexArr)
    // 点击索引表  给to和from赋值
    let toChangeCity=(city:string)=>{
          if(flag.value=="from"){
            from.value=city;
          }
          if(flag.value=="to"){
            to.value=city;
          }
          state.selCity=false;
    }
    let cityChange=()=>{ //点击切换
        let temp=from.value;
        from.value=to.value;
        to.value=temp;
    }
    // 日期插件的确认事件
    let toChangeDate=(val:Date)=>{
        console.log(val,"------------")
        let str=new Date(val)
        let month=str.getMonth()+1;
        let day=str.getDate()
        let week=str.getDay()
        let year=str.getFullYear();
        dateStr.value=year+"-"+month+"-"+day
        let weekStr=''
        switch (week) {
          case 0: 
              weekStr="周日"
            break;
           case 1: 
              weekStr="周一"
            break;
             case 2: 
              weekStr="周二"
            break;
             case 3: 
              weekStr="周三"
            break;
             case 4: 
              weekStr="周四"
            break;
             case 5: 
              weekStr="周五"
            break;
               case 6: 
              weekStr="周六"
            break;
        }
        days.value=weekStr;
        show.value=false;
    }

    // 跳转购买页 并传参
    let turnToBuy=()=>{
        router.push({
          name:"tobuy",
          query:{
            to:to.value,
            from:from.value,
            time:dateStr.value
          }
        })
    }
</script>
<style  scoped>
  .ticket{
    width: 100%;
  }
  .mytic{
    display: flex;
    justify-content: space-evenly;
    margin: 20px auto;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid black;
  }
  .date{
       height: 50px;
    line-height: 50px;
     border-bottom: 1px solid black;
     text-align: left;
  }
  .btn{
    width: 100%;
    margin-top: 20px;
  }
</style>